<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入 layui.css -->
  <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
  <title>管理员页面</title>
  <script src="js/jquery.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <div class="layui-panel" style="display:flex">
    <div
      style="padding: 30px;border: 2px solid rgb(3, 3, 3);border-radius: 15px;width: 100px;text-align: center;height: 20px;margin: 20px;">
      管理员页面</div>


    <table class="layui-hide" id="test" lay-filter="test"></table>

    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中项目运动员数据</button>
      </div>
    </script>
    <div style="display: block;">
      <p style="margin-left: 140px;font-size:large">添加运动项目</p>
      <form class="layui-form" name="adminForm" style="width:300px;margin:20px 0 0 20px;">
        <div class="layui-form-item">
          <label class="layui-form-label">项目名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">项目规则</label>
          <div class="layui-input-block">
            <input type="text" name="rules" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">项目地点</label>
          <div class="layui-input-block">
            <input type="text" name="address" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">开始时间</label>
          <div class="layui-input-block">
            <input type="text" name="starTime" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>

      </form>

      <button class="layui-btn" style="margin-left: 140px;" onclick="submit()">立即提交</button>

    </div>

  </div>

</body>
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js" />
<script src="js/jquery.min.js"></script>
<script>
  console.log($("#sportList"));
  layui.use('table', function () {
    var table = layui.table;
    table.render({
      elem: '#test',
      url: 'http://localhost:8080/getProjects',
      toolbar: '#toolbarDemo',
      parseData: function (res) {
        console.log(res);
        //res 即为原始返回的数据
        return {
          "code": 0, //解析接口状态
          "msg": '', //解析提示文本
          "count": res.length, //解析数据长度
          "data": res //解析数据列表
        };
      },
      //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      cellMinWidth: 200,
      cols: [
        [{
          type: 'radio'
        }, {
          field: 'name',
          width: 250,
          title: '运动会项目',
          sort: true
        }, {
          field: 'rules',
          width: 250,
          title: '项目规则',

        }, {
          field: 'address',
          width: 220,
          title: '地点'
        }, {
          field: 'starTime',
          width: 200,
          title: '开始时间'
        }]
      ],
      page: true
    });
    //头工具栏事件
    table.on('toolbar(test)', function (obj) {
      var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
      switch (obj.event) {
        case 'getCheckData':
          var data = checkStatus.data; //获取选中行数据
          let id
          if (JSON.stringify(data).slice(8, 9) == ',') {
            id = JSON.stringify(data).slice(7, 8)
          } else {
            id = JSON.stringify(data).slice(8, 9)
          }
          $.ajax({
            url: 'http://localhost:8080/getUserProjects',
            type: 'get',
            data: {
              projectId: id
            },
            async: true, //是否异步提交,默认为true
            dataType: 'JSON', //提交的数据格式为JSON,返回的数据格式也是json
            success: function (data) {
              let msg = '参与人员详细数据:<br/>'
              data.forEach(element => {
                console.log(JSON.stringify(element.user));
                msg = msg + JSON.stringify(element.user) + '<br />'
              });
              layer.alert(msg);
            },
            error: function (data) {

            }
          })
          console.log(id);
          break;
      };
    });
  });
  const submit = function (params) {
    console.log(adminForm.name.value);
    const requestParam = {
      name: adminForm.name.value,
      rules: adminForm.rules.value,
      address: adminForm.address.value,
      starTime: adminForm.starTime.value,
    }
    axios.post("http://localhost:8080/insertProject", requestParam, {
      headers: {
        responseType: 'json'
      }
    }).then((res) => {
      window.location.reload(true);
    }).catch(err => {

    });

  }
</script>

</html>